<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      *{
          margin: 0 0;
        padding: 0;
        background-color: #f2f2f2;
      }
   .box{
       width: 350px;
       height: 400px;
       background-color: white;
   }
   .top{
      width: 100%;
      height: 200px;
     background-image: url("img/山脉.png");
      background-repeat: no-repeat;
     background-size: cover;
     padding-top: 20px;
  }
   .red{
      width: 80px;
      height: 40px;
      background-color: red;
      margin-left: 20px;
     color: white;
     text-align: center;
     line-height: 40px;
  }
   h3{
       margin-left: 20px;
       margin-top: 180px;
       background-color: white;
   }
   p{
       margin-left: 20px;
       margin-top: 20px;
     color: #c1c1c1;
       background-color: white;
   }
   .div1{
       margin-left: 20px;
       margin-top: 20px;
      font-size: 12px;
     font-weight: normal;
       color: #c1c1c1;
     float: left;
     background-color: white;
   }
   .more{
     width: 100px;
     height: 40px;
     background-color: #4495da;
     margin-left: 220px;
     margin-top: -20px;
     color: white;
     text-align: center;
     line-height: 40px;
   }
   span{
     margin-top: 10px;
     background-color: white;
   }
  </style>
</head>
<body>
<div class="box">
  <div class="top">
    <div class="red">热点</div>
    <h3>城市空气质量持续改善</h3>
    <p>最新数据显示，本市PM2.5浓度同比下降30%，创十年新低...</p>
    <div class="div1">
     <span>记者：张晓明</span>
      <div class="more">阅读更多</div>
    </div>
  </div>
</div>
</body>
</html>